<!DOCTYPE html>
<html>

<head>
    <title>Bui 框架 富文本编辑器 SSM框架开发</title>
    <meta charset="UTF-8">
    <meta name="keywords"
        content="富文本编辑器、树形列表、树形控件、树控件、手风琴、拾色器、多文件上传、弹窗组件、模态窗口、双向联动表单、右键菜单、jquery拖动、draggable、datagrid、tree、mvvm、combox、tab" />
    <meta name="description"
        content="Bui editor ui框架是一套前后端分离，包含富文本编辑器、双向联动表单、树形列表、树形控件、模态窗口、手风琴、拾色器、多文件上传、弹窗组件等全功能UI框架。还包括Spring mvc spring mybatis高效开发框架" />
    <link rel="shortcut icon" href="/favicon.ico" />
    <link rel="bookmark" href="/favicon.ico" />
    <meta name="renderer" content="webkit|ie-stand" />
    <link type="text/css" rel="stylesheet" lang="stylesheet" href="../theme/default/base.css" />
    <link type="text/css" rel="stylesheet" lang="stylesheet" href="../theme/font/bui-fonts.min.css" />    
    <script type="text/javascript" src="../javascript/basic-2.0.0.js"></script>
    <script type="text/javascript" src="../javascript/plugins-2.0.0.js"></script>
    <style>

    </style>
</head>

<body>
    <div style="padding:50px 50px;">
        <h1>scrollbar测试</h1>
        <div id="main111">
            <div style="margin: 12px 0px;">
                <span>1、隐藏式滚动条</span><span style="padding-left: 30px;"><button id="modify1">动态修改内容</button></span>
            </div>
            <div id="cccc" style="width:300px;height: 150px;border: 1px solid #ccc;overflow: hidden;">
                <div contenteditable="true" class="">
                    <p style="white-space:nowrap;">
                        wewsdsdsdsdswwewewewewsdfsdfsdfsdfsdfsdfsdfsdfdsfsdfdsfsdfsdfsdfdsfsdfdfsdfsdfsdfdsfdsfsdfdf999
                    </p>
                    <p>wewwwewewewew</p>
                    <p>wewwwewewewew</p>
                    <p>wewwwewewewew</p>
                    <p>wewwwewewewew</p>
                    <p>wewwwewewewew</p>
                    <p>wewwwewewewew</p>
                    <p style="white-space:nowrap;">
                        wewwwewewewewsdfsdfsdfsdfsdfsdfsdfsdfdsfsdfdsfsdfsdfsdfdsfsdfdfsdfsdfsdfdsfdsfsdfdfsdf</p>
                    <p>wewwwewewewew</p>
                    <p>wewwwewewewew</p>
                    <p>wewwwewewewew</p>
                    <p style="white-space:nowrap;">
                        wewwwewewewewsdfsdfsdfsdfsdfdsfdsfsdfsdfsdsdfdsfsdfsdfsdfdsfsdfsdfsdfsfdsfsdfsdf</p>
                </div>
            </div>
            <div style="margin: 12px 0px;">
                <span>2、自定义大小/颜色</span><span style="padding-left: 30px;"><button id="modify2">动态修改内容</button></span>
            </div>
            <div id="cccc111" style="width:300px;height: 150px;border: 1px solid #ccc;overflow: hidden;">
                <div contenteditable="true">
                    <p style="white-space:nowrap;">
                        wewsdsdsdsdswwewewewewsdfsdfsdfsdfsdfsdfsdfsdfdsfsdfdsfsdfsdfsdfdsfsdfdfsdfsdfsdfdsfdsfsdfdf999
                    </p>
                    <p>wewwwewewewew</p>
                    <p>wewwwewewewew</p>
                    <p>wewwwewewewew</p>
                    <p>wewwwewewewew</p>
                    <p>wewwwewewewew</p>
                    <p>wewwwewewewew</p>
                    <p style="white-space:nowrap;">
                        wewwwewewewewsdfsdfsdfsdfsdfsdfsdfsdfdsfsdfdsfsdfsdfsdfdsfsdfdfsdfsdfsdfdsfdsfsdfdfsdf</p>
                    <p>wewwwewewewew</p>
                    <p>wewwwewewewew</p>
                    <p>wewwwewewewew</p>
                    <p style="white-space:nowrap;">
                        wewwwewewewewsdfsdfsdfsdfsdfdsfdsfsdfsdfsdsdfdsfsdfsdfsdfdsfsdfsdfsdfsfdsfsdfsdf</p>
                </div>
            </div>
            <div style="margin: 12px 0px;">
                <span>3、自定义大小/颜色</span><span style="padding-left: 30px;"></span>
            </div>
            <div id="cccc222" style="width:300px;height: 150px;border: 1px solid #ccc;overflow: hidden;">
                <div contenteditable="true">
                    <p style="white-space:nowrap;">
                        wewsdsdsdsdswwewewewewsdfsdfsdfsdfsdfsdfsdfsdfdsfsdfdsfsdfsdfsdfdsfsdfdfsdfsdfsdfdsfdsfsdfdf999
                    </p>
                    <p>wewwwewewewew</p>
                    <p>wewwwewewewew</p>
                    <p>wewwwewewewew</p>
                    <p>wewwwewewewew</p>
                    <p>wewwwewewewew</p>
                    <p>wewwwewewewew</p>
                    <p style="white-space:nowrap;">
                        wewwwewewewewsdfsdfsdfsdfsdfsdfsdfsdfdsfsdfdsfsdfsdfsdfdsfsdfdfsdfsdfsdfdsfdsfsdfdfsdf</p>
                    <p>wewwwewewewew</p>
                    <p>wewwwewewewew</p>
                    <p>wewwwewewewew</p>
                    <p style="white-space:nowrap;">
                        wewwwewewewewsdfsdfsdfsdfsdfdsfdsfsdfsdfsdsdfdsfsdfsdfsdfdsfsdfsdfsdfsfdsfsdfsdf</p>
                </div>
            </div>
            <div style="margin: 12px 0px;">
                <span>4、仅水平滚动条</span><span style="padding-left: 30px;"></span>
            </div>
            <div id="ccccx" style="width:300px;height: 150px;border: 1px solid #ccc;overflow: hidden;">
                <div contenteditable="true">
                    <p style="white-space:nowrap;">
                        wewsdsdsdsdswwewewewewsdfsdfsdfsdfsdfsdfsdfsdfdsfsdfdsfsdfsdfsdfdsfsdfdfsdfsdfsdfdsfdsfsdfdf999
                    </p>
                    <p>wewwwewewewew</p>
                    <p>wewwwewewewew</p>
                    <p>wewwwewewewew</p>
                    <p>wewwwewewewew</p>
                    <p>wewwwewewewew</p>
                    <p>wewwwewewewew</p>
                    <p style="white-space:nowrap;">
                        wewwwewewewewsdfsdfsdfsdfsdfsdfsdfsdfdsfsdfdsfsdfsdfsdfdsfsdfdfsdfsdfsdfdsfdsfsdfdfsdf</p>
                    <p>wewwwewewewew</p>
                    <p>wewwwewewewew</p>
                    <p>wewwwewewewew</p>
                    <p style="white-space:nowrap;">
                        wewwwewewewewsdfsdfsdfsdfsdfdsfdsfsdfsdfsdsdfdsfsdfsdfsdfdsfsdfsdfsdfsfdsfsdfsdf</p>
                </div>
            </div>
            <div style="margin: 12px 0px;">
                <span>5、仅垂直滚动条</span><span style="padding-left: 30px;"></span>
            </div>
            <div id="ccccy" style="width:300px;height: 150px;border: 1px solid #ccc;overflow: hidden;">
                <div contenteditable="true">
                    <p style="white-space:nowrap;">
                        wewsdsdsdsdswwewewewewsdfsdfsdfsdfsdfsdfsdfsdfdsfsdfdsfsdfsdfsdfdsfsdfdfsdfsdfsdfdsfdsfsdfdf999
                    </p>
                    <p>wewwwewewewew</p>
                    <p>wewwwewewewew</p>
                    <p>wewwwewewewew</p>
                    <p>wewwwewewewew</p>
                    <p>wewwwewewewew</p>
                    <p>wewwwewewewew</p>
                    <p style="white-space:nowrap;">
                        wewwwewewewewsdfsdfsdfsdfsdfsdfsdfsdfdsfsdfdsfsdfsdfsdfdsfsdfdfsdfsdfsdfdsfdsfsdfdfsdf</p>
                    <p>wewwwewewewew</p>
                    <p>wewwwewewewew</p>
                    <p>wewwwewewewew</p>
                    <p style="white-space:nowrap;">
                        wewwwewewewewsdfsdfsdfsdfsdfdsfdsfsdfsdfsdsdfdsfsdfsdfsdfdsfsdfsdfsdfsfdsfsdfsdf</p>
                </div>
            </div>
        </div>
        <div>
            <!-- <button id="testjq">test-jq</button> -->
        </div>
    </div>
    <script type="text/javascript">
        $B.DomUtils.onDomLoaded(function () {
            console.log("onDomLoaded>>>>>>>>>>>");

            var s1 = $B.myScrollbar($B.DomUtils.findbyId("cccc"), {
                style: {
                    "color": "#0000FF"
                },
                isHide: true,
                onScrollFn: function (x, y) {
                    // var $t = this;
                    console.log("x = " + x + "  y=" + y);
                }
            });

            var btn1 = $B.DomUtils.findbyId("modify1");
           
            $B.DomUtils.click(btn1,function(e){
                console.log("modify 1111111");
                let el = $B.DomUtils.children(s1 ,".bbbbb");$B.DomUtils.remove(el);
                $B.DomUtils.prepend(s1,"<div class='bbbbb' style='height:100px;width:100%'>重哈时代峰峻圣诞节富士康了的副驾驶的福建省抵抗力时代峰峻了</div>");
            });

            // $("#testjq").click(function(){
            //     var el = $($ccc);
            //     if(el.children(".bbbbb").length > 0){
            //         el.children(".bbbbb").remove();
            //     }else{
            //         el.append("<div class='bbbbb' style='height:100px;width:100%'>重哈时代峰峻圣诞节富士康了的副驾驶的福建省抵抗力时代峰峻了</div>");
            //     }                
            // });


           var s2 = $B.myScrollbar($B.DomUtils.findbyId("cccc111"), {
                isHide: false,
                style: {
                    "radius": "4px",
                    "size": "12px",
                    "color": "#62FF5D"
                }
            });
            var count = 1;
            var btn2 = $B.DomUtils.findbyId("modify2");
            $B.DomUtils.click(btn2,function(e){
                let el = $B.DomUtils.children(s2 ,".bbbbb");
                if(el.length > 0){
                    $B.DomUtils.removeChilds(s2);
                }else{
                    if(count > 3){
                        $B.DomUtils.append(s2,"<div class='bbbbb' style='height:100px;width:100%'><p>1。重哈时代峰峻圣诞节富士康了的副驾驶的福建省抵抗力时代峰峻了</p><p>2。重哈时代峰峻圣诞节富士康了的副驾驶的福建省抵抗力时代峰峻了</p><p>1。重哈时代峰峻圣诞节富士康了的副驾驶的福建省抵抗力时代峰峻了</p><p>2。重哈时代峰峻圣诞节富士康了的副驾驶的福建省抵抗力时代峰峻了</p><p>1。重哈时代峰峻圣诞节富士康了的副驾驶的福建省抵抗力时代峰峻了</p><p>2。重哈时代峰峻圣诞节富士康了的副驾驶的福建省抵抗力时代峰峻了</p></div>");
  
                    }else{
                        $B.DomUtils.append(s2,"<div class='bbbbb' style='height:100px;width:100%'><p>1。重哈时代峰峻圣诞节富士康了的副驾驶的福建省抵抗力时代峰峻了</p><p>2。重哈时代峰峻圣诞节富士康了的副驾驶的福建省抵抗力时代峰峻了</p></div>");
  
                    }
                }
                count++;
            });


            
            $B.myScrollbar($B.DomUtils.findbyId("cccc222"), {
                isHide: false,
                style: {
                    "radius": "4px",
                    "size": "6px",
                    "color": "#FF5DBF"
                }
            });
            //$("#ccccx").myscrollbar(
            $B.myScrollbar($B.DomUtils.findbyId("ccccx"), {
                isHide: false,
                "color": "#62FF5D",
                scrollAxis: 'x'
            });
            //$("#ccccy").myscrollbar(
            $B.myScrollbar($B.DomUtils.findbyId("ccccy"), {
                isHide: false,
                scrollAxis: 'y'
            });
        });
    </script>

</body>

</html>